<template>
  <div class="login">
    <div class="login_form">
      <h3>欢迎登录系统</h3>
      <el-form status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      ruleForm:{
        username:'',
        password:'',
      },
    }
  },

  methods:{
    submitForm(){
      console.log(1);
        this.$http.get('/login',{
          username:"admin",
          password:"admin"
        }).then(res=>{
          console.log(res);
        })
    },
    resetForm(){

    }
  }
};
</script>

<style scoped lang="scss">
.login{
  width: 100%;
  height: 100%;
  background: rgb(232, 234, 238);
}
.login_form{
  width: 800px;
  height: 500px;
  margin: 0 auto;
  background: white;
  h3{
    text-align: center;
    height: 100px;
    line-height: 100px;
    font-size: 25px;
  }
}
.el-form-item__content .el-input{
  width: 650px;
  height: 35px;
}
.el-form-item__content button{
  margin: 50px 80px;
  width: 150px;
}
</style>